<script setup>
import { useRouter } from 'vue-router'
import PageSection from './PageSection.vue'
import { getCase } from '~/service/case'

defineProps({
  active: Boolean,
})
const router = useRouter()
const { locale } = useLocale()
const { resolveImgURL } = useGlobalStore()

const { swiper, init } = useInitSwiper()

const list = ref([])

const activeIndex = ref(0)
function onSlideChange(e) {
  activeIndex.value = e.activeIndex
}
const activeTab = ref(0)

function onTabChange(key) {
  activeIndex.value = key
}

// 跳转详情页
function toDetail(id) {
  router.push({
    path: '/examples/case',
    query: {
      id,
    },
  })
}
function onMore() {
  toDetail(list.value[activeIndex.value]?.id)
}
onMounted(async () => {
  const data = await getCase()
  list.value = data.list
})
</script>

<template>
  <PageSection :active :has-padding="false" headless :title="$t('menu.cases')" title-en="Case" relative more-path="/examples">
    <div relative h="screen" max-md:hidden>
      <!-- header -->
      <div absolute top="0" w="full" p="t-[110px] x-[190px]" text="[#fff]" flex="~" justify="between" class="z-[2] items-center">
        <div v-show="active" class="animate-fade-in-left font-sans uppercase home-animate">
          <h3 text="[42px]" class="text-[#fff] opacity-[0.2]">
            Case
          </h3>
          <h3 text="[34px]" m="t-[-16px] max-md:t-[-4px]">
            {{ $t('menu.cases') }}
          </h3>
        </div>
        <div v-show="active" class="flex flex-col animate-fade-in-right home-animate" text="[18px] right" @click="onMore">
          <div class="uppercase">
            More
          </div>
          <img src="~/assets/img/arrow-right-line@2x.png" class="h-[20px] w-[80px]" />
        </div>
      </div>
      <!-- pagination -->
      <ul v-show="active" class="pagination absolute right-[190px] top-[50%] z-2 animate-fade-in-right text-[18px] text-[#fff] leading-[32px] home-animate">
        <li
          v-for="(item, index) in list"
          :key="item.id"
          :class="{ active: index === activeIndex }"
          class="pl-[40px] before:h-[20px] before:w-[20px] before:rounded-[20px]"
          @click="swiper?.slideTo(index)"
        >
          <div class="indicator absolute left-[6px] top-[50%] h-[8px] w-[8px] translate-y-[-50%] rounded-[8px] bg-[#fff] opacity-60" />
          <div :class="[index === activeIndex ? 'visible' : 'invisible']">
            {{ get(item, 'title', locale) }}
          </div>
        </li>
      </ul>
      <Swiper
        class="h-full"
        :allow-touch-move="false"
        :slides-per-view="1"
        direction="vertical"
        @swiper="init"
        @slide-change="onSlideChange"
      >
        <SwiperSlide v-for="(item, index) in list" :key="item.id">
          <div relative h="full" text="[#fff]" class="after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0 after:z-[1] after:bg-black after:opacity-20 after:content-['']" :style="{ backgroundImage: `url(${resolveImgURL(item.cover_url)})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }">
            <div v-show="active && activeIndex === index" w="full" absolute z="[2]" bottom="[100px]" text="center">
              <h4 class="animate-fade-in-down home-animate" m="b-[12px]" text="[32px]">
                {{ get(item, 'title', locale) }}
              </h4>
              <h5 class="animate-fade-in-up home-animate" m="b-[12px]" text="[24px] [#ffffff99]">
                {{ get(item, 'address', locale) }}
              </h5>
              <p class="animate-fade-in-up home-animate" text="[20px] [#ffffffcc]">
                {{ get(item, 'abstract', locale) }}
              </p>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </div>

    <div relative h="screen" hidden max-md:block>
      <!-- header -->
      <div absolute t="0" w="full" p="max-md:t-[50px] max-md:x-[20px]" text="[#fff]" flex="~" justify="between" class="z-[2] items-center">
        <div v-show="active" class="animate-fade-in-left font-sans uppercase home-animate">
          <h3 text="max-md:[20px]" class="text-[#fff] uppercase opacity-[0.2]">
            Case
          </h3>
          <h3 text="max-md:[18px]" m="t-[-16px] max-md:t-[-4px]">
            {{ $t('menu.cases') }}
          </h3>
        </div>
        <div v-show="active" class="flex flex-col animate-fade-in-right home-animate" text="max-md:[16px] right" @click="onMore">
          <div class="uppercase">
            More
          </div>
          <img src="~/assets/img/arrow-right-line@2x.png" class="max-md:w-[40px]" />
        </div>
      </div>

      <div h="screen" class="after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0 after:z-[1] max-md:pt-[130px] after:opacity-20 after:content-['']" :style="{ backgroundImage: `url(${resolveImgURL(list[0]?.cover_url)})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center' }">
        <el-tabs v-model="activeTab" class="tabs" text="[#fff]" @tab-change="onTabChange">
          <el-tab-pane v-for="(item, index) in list" :key="index" text="[#fff]" :label="get(item, 'title', locale)" :name="index">
          </el-tab-pane>
        </el-tabs>
        <div w="full" absolute z="[2]" bottom="max-md:[50px]" text="center [#fff]">
          <div v-show="active">
            <h4 class="animate-fade-in-down home-animate" m="max-md:b-[6px]" text="max-md:[16px]">
              {{ get(list[activeTab], 'title', locale) }}
            </h4>
            <h5 class="animate-fade-in-up home-animate" m="max-md:b-[6px]" text="max-md:[12px]">
              {{ get(list[activeTab], 'address', locale) }}
            </h5>
            <p class="animate-fade-in-up home-animate max-md:px-[30px]" text="max-md:[12px] ">
              {{ get(list[activeTab], 'abstract', locale) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </PageSection>
</template>

<style lang="postcss" scoped>
.pagination {
  li {
    position: relative;
    display: flex;
    align-items: center;

    &.active {
      .indicator {
        opacity: 1;
      }
      &::before {
        @apply block absolute translate-y-[-50%] top-[50%] left-0 bg-transparent border-[2px] border-solid border-[#fff] content-[''];
      }
    }
  }
  li + li {
    margin-top: 16px;
  }
}
.tabs :deep(.el-tabs__nav-scroll) {
  display: flex;
}
.tabs :deep(.el-tabs__nav-wrap) {
  &::after {
    display: none;
  }
}
.tabs :deep(.el-tabs__item) {
  color: #fff !important;
}
</style>
